WebブラウザがあるMP4などのビデオを再生できるかどうかを確かめるには、そのビデオをページにドラッグ・アンド・ドロップしてみるのが一番簡単だと思います。
このサイトのページがそのビデオを再生できるかどうかは、そのビデオを実際にリストアイテムに登録してみる他ありません。

あるビデオがこのサイトのページで再生できない場合、 それはまず、そのビデオ自体の理由から、このサイトのスクリプトの理由から、そしてこのサイトをホストするHTTPサーバーソフトウェアの理由からくるものであることが考えられます。

以上を踏まえながらはじめます。

まず、ListItemBaseクラスのDIVとListTitleクラスのDIVをつくります。


tooltipbase   ビデオを登録する
今回はtooltipbaseを使います。
サイトディレクトリ以下のディレクトリにビデオを置けば追加の設定無しにサイトにビデオの場所を特定させることができるので今回はそうします。

tooltipbase内部に「params:」を置き、続いて「path=」を使ってビデオのパスを登録し、最後に「;」を置いてパラメータブロックを閉じます。
これで猫の動画「Cat-85461.mp4」がリストアイテムに登録されます。


ListItemBase   tag   リストアイテムに文章を付ける
LiteItemBaseのtagを使ってリストアイテムに「猫」と付けます。


ListItemBase   iwidth   リストアイテムの幅を決める
LiteItemBaseのiwidthを使ってリストアイテムの幅を160pxにします。


ListItemBase   categories   ListItemBaseをListTitleに引っ付ける
ListTitleの内部に「お気に入りの動画」を入れ、ListItemBaseのcategoriesにも「お気に入りの動画」を入れます。
ListTitleの内部文字列と同じ文字列をListItemBaseがそのcategoriesに持つことによって、両者LiteItemBase（子）とListTitle（親）が結びつきます。


実際の表示

上の猫のビデオは表示されていますか？
もし表示されていない場合は、他のHTTPサーバーソフトウェアを試してみるのも良いかもしれません。
BlackJumboDogを試す場合はメニューにその項目をつくっています。

（以下、Webブラウザにこのページのビデオが表示される場合の続きです）

リストアイテムに更なるビデオ、ここではふくろうのビデオ「Owl-56136.mp4」を追加します。
前回と同様に「params:」以降に「path」を使って登録します。


ふくろうのビデオを登録し、アイテムのtag「猫」というのは、おかしくなったので「猫とふくろう」に変更します。
各アイテムそれぞれにタイトルを付けたい時はpathに続いてtagを使って登録します。


実際の表示

2つのビデオを登録しましたが、最初のビデオである猫のビデオ「Cat-85461.mp4」1つしか表示されませんでした。

リストアイテムに登録したすべてのビデオを表示させるために、ListTitleに「ListViewOptions="FX"」を追加して表示方法を「FX」に変更します。


実際の表示

これでリストアイテムに登録した全てのビデオが表示されました。

次にふくろうのビデオを他より目立たせる方法を考えます。
これにはビデオの大きさ、枠の色、タイトルの装飾を変えるというのがあります。

そこでふくろうのビデオについて、ビデオの大きさをiwidthを使って160から200に、枠の色をiRectColorを使ってgoldに、そして[]を使ってタイトルの一部を太字にします。


実際の表示

これでふくろうのビデオが目立つようになりました。


video   poster
ビデオにそのロード中に表示させる画像「poster」を登録します。
手順は上記のtag、iwidthやirectcolorの場合と同じです。

poster属性がきちんと設定されているか確認するため、ListTitleのoptionsに「showAttrib_poster;」を追加しました。
このshowAttribは、「showAttrib_＋リストアイテムに表示させたい属性名」の形式で使います。



設定によりますが、下の猫とふくろうのビデオの上にカーソルを乗せてもビデオは再生されないと思います。
これはposterが機能して実際のビデオに成り代わってリストアイテムに表示されているためです。
一つ前のposterの付いていないビデオでは、カーソルをビデオに重ねるとビデオが再生されると思います。

実際の表示

イメージビューア   pageiv;
「V+」ボタンでイメージビューア＋が開きます。
「Viewer」ボタンと「V+」ボタンで開くイメージビューアは新規にタブを作ってそこで機能するものですが、ここではこのページで見るビューアを使ってみます。

PCであればAltキーを押しながら「V+」ボタンで、携帯であれば「V+」ボタンを3秒以上押し続けた後に離せばそのビューアが開きます。
「V+」で常時そのビューアを開かせるには、「設定」ボタンでこのサイトの設定を開き、「イメージビューア」項目の「イメージビューアのデフォルトのオプション」に文字列「pageiv;」を加えます。 その後は「変更を保存してこの設定ページを閉じる」ボタンを押して変更した設定を確定させます。


上のビデオの「V+」ボタンを押すとこのページで見るビューアが開きます。
いくつかのWebブラウザではその仕様でビデオの自動再生が無効にされているので、ビデオの再生を開始するためにはビデオを毎回クリックする必要があるかもしれません。

プレイリスト   VLC XSPF
更にビデオを追加してプレイリストを作り、イメージビューアでそれを再生します。
多くの再生項目から成るリストアイテム用のプレイリストを作るときには、VLCを利用すると楽です。

そのためにはまず、VLCで作ったプレイリスト、XSPFファイルを準備します。
次に左メニューから作業所を選択して表示します。
ローカルファイルのドラッグ・アンド・ドロップによるファイル内容の読み取りを許可しているWebブラウザであれば、作業所ページの上部に位置する大枠、コンソールにXSPFファイルを一つから複数ドラッグ・アンド・ドロップします。

Firefox系であれば上記の手段が使えるかもしれません。
上記の手段が使えない場合は一度Webブラウザのタブにファイルをドラッグ・アンド・ドロップするなどして得られたファイルの内容を上記コンソールにコピー・アンド・ペーストします。
コンソール内に表示されたファイルの内容が文字化けする場合はファイルをUTF-8でエンコードする必要があるかもしれません。


コンソールにXSPFファイルの内容が展開されるのを待ち、「Eval XSPF text」ボタンを押します。


解釈されたテキストが別タブで開きますので、その全てをコピーして、プレイリストを登録するListItemBaseにペーストします。


下がListItemBaseにペーストしたところです。

myoption topImageSelection imageviewergroup
がプレイリストを保持しています。

まず、絶対パス「C:/httpdocroot/_cnd_template_cardboard/video/pixabay/．．．」を相対パス「./video/pixabay/．．．」にします。
tagを「猫とふくろう」から「猫やふくろうなどの動画」に、imageviewergroupを「Playlist temp」から「Playlist 猫とふくろう、その他」に変更します。
また前回のリストアイテムに入れた「 ListViewOptions="FX"」をそのままにしておくと多くのビデオが表示されるので、ここでは取ります。

link #パス置換ラベル#
相対パスにしておけば、サイトやディレクトリの位置構成が変更された場合に楽です。
パス置換ラベルを使うと相対パス「./video/pixabay/．．．」部分を更にきれいにできます。
下のソースにある#video#がパス置換ラベルです。
スクリプトは#で挟まれた文字列「パス置換ラベル」をパス部分に見つけるとその#に挟まれた文字列と同じ文字列を内部に持つlinkクラスを探しはじめ、探し当てるとそのパス置換ラベルをlinkクラスのhref属性の値で置き換えます。


実際の表示

今、イメージビューアに表示させる内容を選択するドロップダウン・メニューを見るとMP4ビデオが一つ一つ項目として登録されているのがわかります。


これは下の画像にある設定によるものです。
その設定からMP4を外せばそれらはこのドロップダウン・メニューには登録されなくなります。


myoption topImageSelection
今、リストアイテムには蝶が表示されていますが、 を使ってトップ画像をお気に入りの猫「Cat-85461.mp4」に変更し、poster「Cat-85461-poster.jpg」を再び付けます。

また、tooltipbaseで登録するビデオの中に実際にはそのパスに存在しないものを混ぜておき、ビューアの挙動を見ます。
それらのkeywordsを「存在するビデオ」か「存在しないビデオ」としておき、リストアイテムのドロップダウン・メニューで振り分けてビューアで見られるようにします。

登録したパスが間違っているなどしてエラーが出てうまくいかないことは私の場合普通に起きます。
ページ上で見ることのできるイメージビューアは手軽に利用できる一方、新規タブを作るイメージビューア＋などのように素材を一覧表示させることができないため、 一旦エラーが起こると不規則な動きを見せ、いったいどの素材でどのような不具合が起こっているのか一目では分からないのが難点です。

通常、サイト最上部にイベントログの表示部分があり、そこをクリックかタップする事でこのビューアのエラーを確認する事ができます。


実際の表示

ドロップダウン・メニューから「存在するビデオ」、「存在しないビデオ」、そして「Playlist 猫とふくろう、その他」を順に選択して、それぞれの場合のイメージビューアの挙動を見ます。
PCの場合はAltキー＋「V+」ボタン、携帯の場合は「V+」を3秒以上長押し、またはイメージビューア・オプション「pageiv;」でこのページで見ることのできるイメージビューアが開きます。